<template>
	<z-nav-bar transparentTitle="auto"></z-nav-bar>
	<view :class="[goldUserInfo.type == 2 && setting.activity_gold_medal_open == 0 ? 'end-header-box' : 'header-box']">
		<view v-if="goldUserInfo.type == 2 && setting.activity_gold_medal_open == 0">
			<image
				:src="goldUserInfo.avatar"
				class="head"
				mode="aspectFill"
			></image>
			<view class="text-c z-font-32 uni-white uni-mt-24">{{ goldUserInfo.userName }}</view>
			<view class="share-title-bg">中国高尔夫金牌教练</view>
			<view class="flex_cc uni-mt-90">
				<view class="upload-button" style="margin-left: 0" @click="saveShar(1)">分享好友</view>
				<view class="upload-button" @click="saveShar(0)">保存海报</view>
			</view>
		</view>
		<!-- #ifndef MP-WEIXIN -->
		<view v-if="goldUserInfo.type == 1 || !goldUserInfo.type" class="upload-button" style="position: absolute;bottom: 115rpx;z-index: inherit;"  @click="saveSharNormal(1)">分享好友</view>
		<!-- #endif -->
	</view>
	
	<view
		class="content-box"
		:style="{
			background: goldUserInfo.type == 1 && setting.activity_gold_medal_open == 1 ? 'rgba(240, 245, 242, 0.6)' : '',
			'backdrop-filter': goldUserInfo.type == 1 && setting.activity_gold_medal_open == 1 ? 'blur(40px)' : ''
		}"
	>
		<!-- #ifdef MP-WEIXIN -->
		<view class="flex_fsc">
			<view style="margin: 0 0 36rpx 48rpx;">
				<button open-type="share">
					<view class="upload-button" style="margin: 0;">分享好友</view>
				</button>
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<view v-if="goldUserInfo.type == 1 && setting.activity_gold_medal_open == 1" class="judge-box flex_fsc">
			<image :src="setting.oss_pub_domain + '/app-img/gold-medal-coach/judgeship.png'"></image>
			<view class="text-w uni-ml-20">{{ goldUserInfo.userName }}</view>
			<view class="uni-color-grey uni-ml-16">(评委身份)</view>
			<view class="uni-color-main uni-ml-16">已通过</view>
		</view>
		
		<view class="flex_fsc">
			<view
				v-if="
					goldUserInfo.type == 2 &&
					(!goldUserInfo.videoUrl || goldUserInfo.status == 3) &&
					setting.activity_gold_medal_open == 1
				"
				class="upload-button"
				:style="{ width: goldUserInfo.status == 3 ? '180rpx' : '160rpx' }"
				@click="uploadVideofile.open()"
			>
				{{ goldUserInfo.status == 3 ? '重新' : '' }}上传作品
			</view>
			<view v-if="goldUserInfo.type == 2 && setting.activity_gold_medal_open == 1" class="upload-button" style="margin-left: 16rpx" @click="saveShar(1)">分享好友</view>
		</view>
		<view :class="[setting.activity_gold_medal_open == 1 ? 'start' : 'end', 'content']" :style="{height: goldUserInfo.type ? '' : '200rpx'}">
			<view v-if="goldUserInfo.type == 2 && goldUserInfo.videoUrl && setting.activity_gold_medal_open == 1">
				<view class="flex_fsc">
					<view class="line"></view>
					<view class="flex_sbc width-100">
						<view class="title-style">
							我的参赛作品
							<span style="font-weight: 400">（{{ goldUserInfo.userName }}）</span>
						</view>
						<view class="z-font-32" :style="{ color: reviewStatus[goldUserInfo.status || 0].color }">
							{{ reviewStatus[goldUserInfo.status || 0].text }}
						</view>
					</view>
				</view>
				<!-- <video :src="setting.oss_pub_domain + goldUserInfo.videoUrl" class="video-class"></video> -->
				<view v-html="videoHtml" class="video-class"></view>
			</view>
			<view v-if="works">
				<view v-if="goldUserInfo.type == 2 && goldUserInfo.videoUrl" class="flex_sbc uni-mt-16 uni-mb-60">
					<view class="z-font-32">分享获赞参与热度评选</view>
					<view class="flex_cc share-button">
						<image
							:src="setting.oss_pub_domain + '/app-img/gold-medal-coach/icon_share.png'"
							class="icon-size-32 uni-mr-8"
						></image>
						<view @click="share">立即分享</view>
					</view>
				</view>
			</view>
			<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="start content">
		<!-- #endif -->
			<view v-if="!works && setting.activity_gold_medal_open == 1">
				<view class="flex_fsc">
					<view class="line"></view>
					<view class="title-style">评选内容</view>
				</view>
				<view class="item-box">
					<view class="flex_sbc">
						<view class="flex_fsc">
							<image
								:src="setting.oss_pub_domain + '/app-img/gold-medal-coach/trophy.png'"
								class="icon-size-32"
							></image>
							<view class="uni-white uni-ml-20">大赛介绍</view>
						</view>
						<view class="button" @click="works = 1">参赛作品</view>
					</view>

					<view class="flex_fs uni-mt-60">
						<image
							class="right-icon"
							:src="setting.oss_pub_domain + '/app-img/gold-medal-coach/right.png'"
						></image>
						<view class="content-text">金牌教练评选活动是一个非常好的提供给全国教练员相互交流、互相学习的平台。</view>
					</view>
				</view>
				<view class="item-box">
					<view class="flex_fsc uni-mt-4">
						<image
							:src="setting.oss_pub_domain + '/app-img/gold-medal-coach/file.png'"
							class="icon-size-32"
						></image>
						<view class="uni-white uni-ml-20">评选规则</view>
					</view>

					<view class="flex_fs uni-mt-60">
						<image
							class="right-icon"
							:src="setting.oss_pub_domain + '/app-img/gold-medal-coach/right.png'"
						></image>
						<view class="content-text">金牌教练评选活动是一个非常好的提供给全国教练员相互交流、互相学习的平台。</view>
					</view>
				</view>
			</view>
			<view v-if="setting.activity_gold_medal_open == 0" style="line-height: 38rpx">
				<view class="flex_sbc">
					<view class="flex_fsc">
						<view class="line"></view>
						<view class="title-style">{{ endSwitchStatus ? '评选结果' : '大赛介绍' }}</view>
					</view>
					<view class="end-button" @click="endSwitchStatus = !endSwitchStatus">
						{{ endSwitchStatus ? '大赛介绍' : '评选结果' }}
					</view>
				</view>
				<view v-if="endSwitchStatus">
					<view v-for="res in resultList" :key="res.avatar" class="flex_fs uni-mt-32">
						<image :src="res.avatar" class="user-head" mode="aspectFill"></image>
						<view>
							<view class="text-w">{{ res.name }}</view>
							<view class="z-font-24 uni-mt-6" style="color: #525866;">{{ res.intro }}</view>
						</view>
					</view>
				</view>
				<view v-else class="uni-ml-26 uni-mt-16 z-font-24">
					金牌教练评造活动是一个非常好的提供给全国教练员相互交流、互相学习的平台。
				</view>
				<view class="flex_fsc uni-mt-20">
					<view class="line"></view>
					<view class="title-style">评选规则</view>
				</view>
				<view class="uni-ml-26 uni-mt-16 z-font-24">
					金牌教练评造活动是一个非常好的提供给全国教练员相互交流、互相学习的平台。
				</view>
			</view>
		</view>
	</view>
	<!-- #ifdef MP-WEIXIN -->
	<view style="background: rgba(240, 245, 242, 0.9);padding: 0 32rpx;">
	<!-- #endif -->
	<!-- #ifndef MP-WEIXIN -->
	<view style="background: rgba(240, 245, 242, 0.9);padding: 0 32rpx;" :style="{'margin-top': goldUserInfo.type ? '' : '-140rpx'}">
	<!-- #endif -->
		<entry v-if="works"></entry>
		<view class="history" :style="{'margin-top': goldUserInfo.type ? '' : '640rpx'}">
			<view style="height: 48rpx;"></view>
			<view class="title title-style">往期展示</view>
			<view>
				<image
				class="uni-mt-40 history-img"
				:src="setting.oss_pub_domain + '/app-img/gold-medal-coach/history1.png'"
				></image>
				<image
					class="uni-mt-24 history-img"
					:src="setting.oss_pub_domain + '/app-img/gold-medal-coach/history2.png'"
				></image>
			</view>
		</view>
	</view>
	<upload-video ref="uploadVideofile" @done="uploadSucess"></upload-video>
</template>

<script setup>
import { ref, getCurrentInstance, provide, computed } from 'vue';
import { onShareAppMessage } from '@dcloudio/uni-app';
import { getUserInfo, getPoster, getResult } from '../../api/gold-medal-coach';
import UploadVideo from './upload-video';
import Entry from './entry';

const { proxy: that } = getCurrentInstance();
// that.setting.activity_gold_medal_open = 1
const goldUserInfo = ref({}),
	reviewStatus = [
		{
			color: '#999999',
			text: '未上传'
		},
		{
			color: '#FF7742',
			text: '评审中'
		},
		{
			color: '#008965',
			text: '初赛通过'
		},
		{
			color: '#E23A3A',
			text: '未通过'
		}
	];

// #ifndef MP-WEIXIN
const token = uni.getStorageSync('token')
if (token) getUserInfo().then((res) => {
	if (res && res.videoUrl) videoHtml.value = setVideoHtml(res.videoUrl)
	if (res) goldUserInfo.value = res;
});
// #endif

provide('goldUserInfo',  computed(() => goldUserInfo.value));

const works = ref(0),
	endSwitchStatus = ref(true);

const uploadVideofile = ref('');
function uploadSucess(e) {
	goldUserInfo.value.videoUrl = e;
	videoHtml.value = setVideoHtml(e)
}

const videoHtml = ref('')
function setVideoHtml(src) {
	return `<video controlslist="nodownload"	controls="controls"   src="${that.setting.oss_pub_domain + src}"   style="height:100%;width: 100%;background: #333"  poster="${`${that.setting.oss_pub_domain}${src}?x-oss-process=video/snapshot,t_1000,ar_auto`}" webkit-playsinline="" playsinline="" ></video>`
}

/**
 * 教练分享或保存海报
 * @param {Number} type 0 保存 1 分享
 */
function saveShar(type) {
	getPoster({ phones: goldUserInfo.value.phones }).then((res) => {
		if (type)
			uni.share({
				provider: 'weixin',
				scene: 'WXSceneSession',
				type: 2,
				imageUrl: res,
				success: res => {
					that.tools.alert('分享成功')
				}
			});
		else uni.downloadFile({
			url: res,
			success: tmp => {
				uni.saveImageToPhotosAlbum({
					filePath: tmp.tempFilePath,
					success: () => {
						that.tools.alert('保存成功')
					}
				})
			}
		})
	});
}

// #ifdef MP-WEIXIN
onShareAppMessage(res => {
	return {
		title: '中国高尔夫金牌教练评选'
	}
})
// #endif


/**
 * 普通用户或评委分享或保存海报
 * @param {Number} type 0 保存 1 分享
 */
function saveSharNormal(type) {
	const imageUrl = that.setting.oss_pub_domain + '/app-img/gold-medal-coach/share.png'
	if (type)
		uni.share({
			provider: 'weixin',
			scene: 'WXSceneSession',
			type: 2,
			imageUrl,
			success: res => {
				that.tools.alert('分享成功')
			}
		});
	else uni.downloadFile({
		url: imageUrl,
		success: tmp => {
			uni.saveImageToPhotosAlbum({
				filePath: tmp.tempFilePath,
				success: () => {
					that.tools.alert('保存成功')
				}
			})
		}
	})
}

function share() {
	uni.share({
	    provider: 'weixin',
	    scene: "WXSceneSession",
	    type: 5,
	    imageUrl: that.setting.oss_pub_domain + goldUserInfo.value.videoUrl + '?x-oss-process=video/snapshot,t_1000,ar_auto',
	    title: '中国高尔夫金牌教练评选作品\n选手姓名：' + goldUserInfo.value.userName,
	    miniProgram: {
	        id: 'gh_6be15b82eac6',
	        path: 'pages/gold-medal-coach/index',
			webUrl: 'http://uniapp.dcloud.io'
	    },
	    success: ret => {
			that.tools.alert('分享成功')
	    }
	});
}

/**
 * 获取评选结果
 */

const resultList = ref([])
getResult().then(res => {
	console.log(res);
	resultList.value = res
})


</script>

<style lang="scss" scoped>
@import './index.scss';
::v-deep button {
	margin: 0 !important;
	padding: 0 !important;
	width: 160rpx !important;
	height: 56rpx !important;
	background: transparent !important;
	border: none !important;
}
::v-deep button::after {
	border: none !important;
}
</style>`